<template>
  <div>
    <div class="left">
      菜单部分
      <ul>
        <li v-for="(food,index) in lists" :key="'order'+index">
          {{food.name}}--{{food.price}}
          <button type="button" @click="minus(food,index)">-</button>
          <span>{{typeof food.num === 'undefined'? 0:food.num}}</span>
          <button type="button" @click="add(food,index)">+</button>
        </li>
      </ul>
    </div>
    <div class="right">计算部分</div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'order',
  data () {
    return {
      lists: this.$store.state.lists
    }
  },
  // mounted () {
  //   const arr = _.filter([1, 2, 3], (item) => item > 1)
  //   console.log(arr)
  // },
  computed: {
    orders () {
      return _.filter(this.lists, (item) => typeof item.num !== 'undefined' && item.num > 0)
    }
  },
  methods: {
    minus (food, index) {
      if (typeof food.num === 'undefined') {
        food.num = 0
      }
      food.num--
      if (food.num < 0) {
        food.num = 0
      }
      this.$set(this.lists, index, food)
    },
    add (food, index) {
      if (typeof food.num === 'undefined') {
        food.num = 0
      }
      food.num++
      if (food.num > 100) {
        food.num = 100
      }
      this.$set(this.lists, index, food)
    }
  },
  components: {

  }
}
</script>

<style lang='scss' scoped>
</style>
